<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/courseManage' }">课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ruleForm.id== -1 ?"课程新建":"课程编辑"}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row v-loading="loading">

      <el-col :span="12" :offset="6">
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .15);border-radius: 4px">
          <el-row>
            <div style="height: 20px;"></div>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="16" :offset="4">
              <el-row type="flex" justify="start" style="flex-wrap: wrap; flex-direction: row" :gutter="10">

                <div class="demo-image__preview" v-if="ruleForm.id!=-1&&isUpload!=1">
                  <el-image style="width: 150px; height: 150px" :src="'http://'+ruleForm.fileDomain+'/'+ruleForm.url"
                    :preview-src-list="imagePreview">
                  </el-image>
                </div>

                <div style="width: 10px">

                </div>

                <el-upload action="/api/qiniu/upload" list-type="picture-card" :auto-upload="true"
                  :on-success="handleUploadSuccess" ref="pictureUpload" :model="pictureUpload" :limit="1"
                  :headers="uploadHeaders">
                  <i slot="default" class="el-icon-plus" v-if="ruleForm.id==-1"></i>
                  <p v-if="ruleForm.id!=-1">更换</p>
                  <div slot="file" slot-scope="{file}">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                        <i class="el-icon-download"></i>
                      </span>
                      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>

              </el-row>
            </el-col>
          </el-row>

          <el-row>
            <div style="height: 20px;"></div>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="22" :offset="1">
              <el-row :gutter="10">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="封面url" prop="url">
                    <el-input v-model="ruleForm.url" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="课程名称" prop="courseTitle">
                    <el-input v-model="ruleForm.courseTitle" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="课程说明" prop="courseDes">
                    <el-input v-model="ruleForm.courseDes" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="课程等级" prop="courseGrade">
                    <el-input v-model.number="ruleForm.courseGrade" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="课时" clearable prop="courseTime">
                    <el-input v-model.number="ruleForm.courseTime" clearable></el-input>
                  </el-form-item>

                  <el-form-item label="课程类别" prop="trainId">
                    <el-select v-model="ruleForm.trainId" clearable filterable placeholder="请选择课程分类">
                      <el-option v-for="item in selectdatatrain" :key="item.trainId" :label="item.trainName"
                        :value="item.trainId">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="课程状态" prop="courseStatus">
                    <el-select v-model="ruleForm.courseStatus" clearable filterable placeholder="课程状态">
                      <el-option v-for="item in selectdatastatus" :key="item.courseStatus"
                        :label="item.courseStatusName" :value="item.courseStatus">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="管理员设置" prop="managerId">
                    <el-select v-model="ruleForm.managerId" clearable filterable placeholder="管理员设置">
                      <el-option v-for="item in selectdata" :key="item.managerId" :label="item.managerName"
                        :value="item.managerId">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="是否需要必修" prop="isNeedOk">
                    <el-switch v-model="ruleForm.isNeedOk" active-value="1" inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-divider content-position="left">课程视频上传</el-divider>

                  <!-- 视频上传 -->
                  <el-upload class="upload-demo" action="/api/qiniu/upload" :multiple="true" :auto-upload="true"
                    :show-file-list="false" :on-success="handleSuccessVideo" :on-exceed="videoFileMax"
                    :limit="videoLimit" :model="videoUpload" ref="videoUpload" :headers="uploadHeaders">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">最多只能上传10个</div>

                  </el-upload>
                  <!-- 视频上传列表 -->
                  <el-table :data="videoFiles" style="width: 100%">

                    <div v-for="(item,index) in tableTitle" :key="index">
                      <el-table-column :prop="item.prop" :label="item.title" :width="item.width" align='center'>

                        <template slot-scope="{row,$index}">
                          <el-input v-model="row[item.prop]" v-if="currentEditVideo === $index"
                            @keyup.enter.native="finishEditClickVideo()"></el-input>
                          <span v-else>{{row[item.prop]}}</span>
                        </template>

                      </el-table-column>
                    </div>
                    <el-table-column label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button @click="removeClickVideo(scope.$index)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="finishEditClickVideo(scope)"
                          v-if="currentEditVideo === scope.$index">完成</el-button>
                        <el-button type="text" size="small" @click="EditClickVideo(scope)" v-else>编辑</el-button>
                      </template>
                    </el-table-column>

                  </el-table>

                  <el-divider content-position="left">课程附件上传</el-divider>

                  <!-- 附件上传 -->
                  <el-upload class="upload-demo" action="/api/qiniu/upload" :multiple="true" :auto-upload="true"
                    :show-file-list="false" :on-success="handleSuccessDocument" :on-exceed="documentFileMax"
                    :limit="documentLimit" :model="documentUpload" ref="documentUpload" :headers="uploadHeaders">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">最多只能上传10个</div>
                  </el-upload>
                  <!-- 附件上传列表 -->
                  <el-table :data="documentFiles" style="width: 100%">
                    <div v-for="(item,index) in tableTitle" :key="index">
                      <el-table-column :prop="item.prop" :label="item.title" :width="item.width" align='center'>
                        <template slot-scope="{row,$index}">
                          <el-input v-model="row[item.prop]" v-if="currentEditDocument === $index"
                            @keyup.enter.native="finishEditClickDocument()"></el-input>
                          <span v-else>{{row[item.prop]}}</span>
                        </template>
                      </el-table-column>
                    </div>
                    <el-table-column label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button @click="removeClickDocument(scope.$index)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="finishEditClickDocument(scope)"
                          v-if="currentEditDocument === scope.$index">完成</el-button>
                        <el-button type="text" size="small" @click="EditClickDocument(scope)" v-else>编辑</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="height:20px">

                  </div>
                  <el-form-item v-if="ruleForm.id==-1">
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
                  <el-form-item v-if="ruleForm.id!=-1">
                    <el-button type="primary" @click="submitUpdateForm('ruleForm')">更新数据</el-button>
                    <el-button @click="returnCourseManage">返回课程管理</el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    props: {
      //文件列表
      // files: {
      //     type: Array,
      //     default: () => []
      // },
      //是否展示删除列(默认显示删除列,可自定义)
      isShowDel: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        uploadHeaders: {}, //表单请求头
        isDocumentUpload: 0,
        // 是否上传了视频0没有1上传了
        isVideoUpload: 0,
        // 是否上传了封面0没有1上传了
        isUpload: 0,
        // 大图预览
        imagePreview: [],
        loading: true,
        // 视频上传文件限制
        videoLimit: 10,
        // 文档上传文件限制
        documentLimit: 20,
        // 文件列表编辑控制
        currentEditVideo: -1,
        currentEditDocument: -1,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        // 封面上传列表
        pictureUpload: {},
        // 视频上传列表
        videoUpload: {},
        // 文档上传列表
        documentUpload: {},
        // 自定义视频上传列表
        videoFiles: [],
        // 自定义文档上传列表
        documentFiles: [],
        // 原表单
        originalForm: {
          // 课程id
          id: '',
          // 封面url
          url: '',
          // 课程标题
          courseTitle: '',
          // 课程说明
          courseDes: '',
          // 课程等级
          courseGrade: '',
          // 课时
          courseTime: '',
          // 课程类别ID
          trainId: '',
          // 课程状态
          courseStatus: '',
          // 经理的id
          managerId: '',
          // 是否需要必修
          isNeedOk: '',
          // 资源外链
          fileDomain: '',
          // 文件数组
          files: []
        },
        ruleForm: {
          // 课程id
          id: '',
          // 封面url
          url: '',
          // 课程标题
          courseTitle: '',
          // 课程说明
          courseDes: '',
          // 课程等级
          courseGrade: '',
          // 课时
          courseTime: '',
          // 课程类别ID
          trainId: '',
          // 课程状态
          courseStatus: '',
          // 经理的id
          managerId: '',
          // 是否需要必修
          isNeedOk: '',
          // 资源外链
          fileDomain: '',
          // 视频的url
          // listUrl: '',
          // 资源名称
          // listName: '',
          // 资源在这个课程的描述
          // listDes: '',
          // 文件数组
          files: []
          // {
          //     listUrl: '1.jpg',
          //     listName: '1',
          //     listDes: '1',
          //     listFormat: 'mp4'
          //   }
        },
        tableTitle: [{
            title: '文件名称',
            prop: 'listName'
          },
          {
            title: '课程中资源的描述或名称',
            prop: 'listDes'
          }
        ],
        rules: {
          url: [{
            required: true,
            message: '请上传封面',
            trigger: 'blur'
          }],
          courseTitle: [{
              required: true,
              message: '请输入课程标题',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            }
          ],
          courseDes: [{
              required: true,
              message: '请输入课程说明',
              trigger: 'blur'
            },
            {
              min: 3,
              message: '长度在 3  个字符以上',
              trigger: 'blur'
            }
          ],
          courseGrade: [{
            required: true,
            type: 'number',
            min: 0,
            max: 10,
            message: '课程等级0-10'
          }],
          courseTime: [{
            required: true,
            type: 'number',
            min: 0,
            max: 100,
            message: '课时0-100'
          }],
          trainId: [{
            required: true,
            message: '请选择课程类别',
            trigger: 'change'
          }],
          courseStatus: [{
            required: true,
            message: '请选择课程状态',
            trigger: 'change'
          }],
          managerId: [{
            required: true,
            message: '请选择负责人',
            trigger: 'change'
          }]
        },
        // 负责人的数组
        selectdata: [],
        // 课程分类的数组
        selectdatatrain: [],
        // 课程状态的数组
        selectdatastatus: []
      }
    },
    methods: {
      remove(files, file) {
        for (var i = 0; i < files.length; i++) {
          if (files[i]['url'] == file.url) {
            files.splice(i, 1)
          }
        }
      },

      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            alert('submit!')
            // 传输前数据处理

            for (let index = 0; index < this.videoFiles.length; index++) {
              this.ruleForm.files[this.ruleForm.files.length] = this.videoFiles[
                index
              ]
            }
            for (let index = 0; index < this.documentFiles.length; index++) {
              this.ruleForm.files[
                this.ruleForm.files.length
              ] = this.documentFiles[index]
            }
            console.log('传输前this.ruleForm', this.ruleForm)
            // return
            this.$axios
              .post('/api/course/courseManage', this.ruleForm)
              .then(res => {
                if (res.data.code === 200) {
                  console.log('传输后this.ruleForm', this.ruleForm)
                  this.$message.success('添加成功')
                  this.$router.push({
                    path: '/course/courseManage'
                  })
                } else {
                  this.$message.error(res.data.message)
                }
              })
              .catch()
          } else {
            console.log('error submit!!')
            console.log(this.ruleForm)
            return false
          }
        })
      },
      resetForm(formName) {
        let uploadFiles = this.$refs.pictureUpload.uploadFiles
        // 图片清空
        for (var i = 0; i < uploadFiles.length; i++) {
          this.$axios.delete(
            '/api/qiniu/delete/file/' + uploadFiles[i]['response'].data.fileName
          )
        }
        this.$refs.pictureUpload.clearFiles()

        //  视频清空
        this.$refs.videoUpload.clearFiles()
        for (var i = 0; i < this.videoFiles.length; i++) {
          this.$axios.delete(
            '/api/qiniu/delete/file/' + this.videoFiles[i].listUrl
          )
        }

        //  文档清空
        this.$refs.documentUpload.clearFiles()
        for (var i = 0; i < this.documentFiles.length; i++) {
          this.$axios.delete(
            '/api/qiniu/delete/file/' + this.documentFiles[i].listUrl
          )
        }
        this.ruleForm.files = []

        this.videoFiles = []
        this.documentFiles = []
        // 表单清空
        this.$refs[formName].resetFields()
      },

      submitUpdateForm() {
        for (let index = 0; index < this.videoFiles.length; index++) {
          this.ruleForm.files.push(this.videoFiles[index])
        }

        for (let index = 0; index < this.documentFiles.length; index++) {
          this.ruleForm.files.push(this.documentFiles[index])
        }
        let isOk = false
        for (let i = 0; i < this.originalForm.files.length; i++) {
          for (let j = 0; j < this.ruleForm.files.length; j++) {
            console.log(
              'this.originalForm.files[i].listUrl',
              this.originalForm.files[i].listUrl
            )
            console.log(
              'this.ruleForm.files[j].listUrl',
              this.ruleForm.files[j].listUrl
            )

            if (
              this.originalForm.files[i].listUrl == this.ruleForm.files[j].listUrl
            ) {
              isOk = true
              break
            }
          }
          if (!isOk) {
            this.$axios.delete(
              '/api/qiniu/delete/file/' + this.originalForm.files[i].listUrl
            )
            isOk = false
          }
          // console.log("this.originalForm",this.originalForm);
          // console.log("this.ruleForm",this.ruleForm);
        }
        this.$axios
          .put('/api/course/courseManage', this.ruleForm)
          .then(res => {
            if (res.data.code === 200) {
              console.log('传输后this.ruleForm', this.ruleForm)
              this.$message.success('更新成功')
              this.$router.push({
                path: '/course/courseManage'
              })
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch()
      },
      // returnCourseManage

      handleUploadSuccess(res, file) {
        //处理成功后的设置
        if (res.code === 200) {
          this.$message.success('上传成功')
          if (this.ruleForm.id != -1 && this.isUpload != 1) {
            console.log(this.ruleForm.url)
            this.isUpload = 1
          }
          this.ruleForm.url = res.data.fileName
          console.log(
            '-----JSON.stringify(this.pictureUpload)----',
            this.$refs.pictureUpload.uploadFiles
          )
        } else {
          let uploadFiles = this.$refs.pictureUpload.uploadFiles
          this.remove(uploadFiles, file)
          this.$message.success(res.message)
        }
      },
      handleRemove(file) {
        console.log('this.$refs.pictureUpload', this.$refs.pictureUpload)
        let uploadFiles = this.$refs.pictureUpload.uploadFiles
        console.log('uploadFiles.length', uploadFiles.length)
        if (uploadFiles.length < 1) {
          this.$message.error('没有文件或者正在上传中')
          return
        }
        for (var i = 0; i < uploadFiles.length; i++) {
          if (uploadFiles[i]['url'] == file.url) {
            console.log(uploadFiles[i]['response'].data.fileName)
            this.$axios
              .delete(
                '/api/qiniu/delete/file/' +
                uploadFiles[i]['response'].data.fileName
              )
              .then(res => {
                if (res.data.code == 200) {
                  this.remove(uploadFiles, file)
                  this.ruleForm.url = null
                  this.$message.success(res.data.message)
                } else {
                  this.$message.success(res.data.message)
                }
              })
              .catch()
          }
        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleDownload(file) {
        console.log(file)
      },
      getdata() {
        this.$axios.get('/api/course/courseManage/condition').then(res => {
          if (res.data.code === 200) {
            this.selectChange(res.data.data)
            this.loading = false
          }
        })
        console.log(this.ruleForm.id)
        if (this.ruleForm.id != -1) {
          this.$axios
            .get('/api/course/courseManage' + '/' + this.ruleForm.id)
            .then(res => {
              if (res.data.code === 200) {
                console.log(res)
                let data = res.data.data
                this.originalForm.id = data.id
                this.originalForm.url = data.url
                this.originalForm.courseTitle = data.courseTitle
                this.originalForm.courseDes = data.courseDes
                this.originalForm.courseGrade = data.courseGrade
                this.originalForm.courseTime = data.courseTime
                this.originalForm.trainId = data.trainId
                this.originalForm.courseStatus = data.courseStatus
                this.originalForm.managerId = data.managerId
                this.originalForm.isNeedOk = data.isNeedOk + ''
                for (let i = 0; i < data.files.length; i++) {
                  this.originalForm.files.push(data.files[i])
                }

                this.ruleForm.id = data.id
                this.ruleForm.url = data.url
                this.ruleForm.courseTitle = data.courseTitle
                this.ruleForm.courseDes = data.courseDes
                this.ruleForm.courseGrade = data.courseGrade
                this.ruleForm.courseTime = data.courseTime
                this.ruleForm.trainId = data.trainId
                this.ruleForm.courseStatus = data.courseStatus
                this.ruleForm.managerId = data.managerId
                this.ruleForm.isNeedOk = data.isNeedOk + ''
                this.ruleForm.fileDomain = data.fileDomain
                this.imagePreview = [
                  'http://' + this.ruleForm.fileDomain + '/' + this.ruleForm.url
                ]
                for (let i = 0; i < data.files.length; i++) {
                  if (data.files[i].listFormat == 2) {
                    this.videoFiles.push(data.files[i])
                  } else if (data.files[i].listFormat == 3) {
                    this.documentFiles.push(data.files[i])
                  }
                }
              }
            })
        }
      },
      selectChange(val) {
        this.selectdata = val.managerNameDtos
        this.selectdatatrain = val.trainDtos
        this.selectdatastatus = val.courseStatusDtos
      },

      handleSuccessVideo(res, file) {
        if (this.ruleForm.id != -1 && this.isVideoUpload != 1) {
          this.isVideoUpload = 1
        }
        if (res.code === 200) {
          console.log('res', res)
          this.$message.success('上传成功')

          if (this.ruleForm.id != -1) {
            this.originalForm.files.push({
              listName: res.data.originName,
              listUrl: res.data.fileName,
              listDes: '资源在课程中的名称',
              listFormat: '2'
            })
          }

          this.videoFiles.push({
            listName: res.data.originName,
            listUrl: res.data.fileName,
            listDes: '资源在课程中的名称',
            listFormat: '2'
          })

          console.log(this.ruleForm.files)

          // fileList.name = res.data.fileName
          // fileList.url = res.data.url
          // console.log('fileList', fileList)
          // this.ruleForm.listUrl = res.data.url
        } else {
          this.$message.success(res.message)
        }
      },

      // 视频文件列表
      //   删除
      removeClickVideo(row) {
        let uploadFiles = this.$refs.videoUpload.uploadFiles
        if (this.ruleForm.id != -1) {
          if (this.isVideoUpload == 1) {
            if (uploadFiles.length == 1) {
              this.$refs.videoUpload.uploadFiles = []
            } else {
              if (
                uploadFiles[row].response.data.fileName ==
                this.videoFiles[row].listUrl
              ) {
                console.log('满足了条件---------')
                this.$refs.videoUpload.uploadFiles.splice(row, 1)
              }
            }
          }

          if (this.videoFiles.length == 1) {
            this.videoFiles = []
          } else {
            this.videoFiles.splice(row, 1)
          }
        } else {
          this.$axios
            .delete('/api/qiniu/delete/file/' + this.videoFiles[row].listUrl)
            .then(res => {
              if (uploadFiles.length == 1) {
                this.$refs.videoUpload.uploadFiles = []
              } else {
                if (
                  uploadFiles[row].response.data.fileName ==
                  this.videoFiles[row].listUrl
                ) {
                  console.log('满足了条件---------')
                  this.$refs.videoUpload.uploadFiles.splice(row, 1)
                }
              }
              if (this.videoFiles.length == 1) {
                this.videoFiles = []
              } else {
                this.videoFiles.splice(row, 1)
              }
            })
            .catch()
        }
      },

      //编辑
      EditClickVideo(scope) {
        console.log(scope)
        this.currentEditVideo = scope.$index
      },

      // 完成
      finishEditClickVideo() {
        this.currentEditVideo = -1
      },
      videoFileMax() {
        this.$message.warning(`请最多上传 ${this.videoLimit} 个文件。`)
      },

      // 文档上传
      handleSuccessDocument(res, file) {
        if (this.ruleForm.id != -1 && this.isDocumentUpload != 1) {
          this.isDocumentUpload = 1
        }
        if (res.code === 200) {
          console.log('res', res)
          this.$message.success('上传成功')

          if (this.ruleForm.id != -1) {
            this.originalForm.files.push({
              listName: res.data.originName,
              listUrl: res.data.fileName,
              listDes: '资源在课程中的名称',
              listFormat: '3'
            })
          }

          this.documentFiles.push({
            listName: res.data.originName,
            listUrl: res.data.fileName,
            listDes: '资源在课程中的名称',
            listFormat: '3'
          })
          console.log(this.ruleForm.files)
        } else {
          this.$message.success(res.message)
        }
      },

      // 附件文件列表
      //   删除
      removeClickDocument(row) {
        let uploadFiles = this.$refs.documentUpload.uploadFiles
        if (this.ruleForm.id != -1) {
          if (this.isDocumentUpload == 1) {
            if (uploadFiles.length == 1) {
              this.$refs.documentUpload.uploadFiles = []
            } else {
              if (
                uploadFiles[row].response.data.fileName ==
                this.documentFiles[row].listUrl
              ) {
                console.log('满足了条件---------')
                this.$refs.documentUpload.uploadFiles.splice(row, 1)
              }
            }
          }

          if (this.documentFiles.length == 1) {
            this.documentFiles = []
          } else {
            this.documentFiles.splice(row, 1)
          }
        } else {
          let uploadFiles = this.$refs.documentUpload.uploadFiles
          this.$axios
            .delete('/api/qiniu/delete/file/' + this.documentFiles[row].listUrl)
            .then(res => {
              if (uploadFiles.length == 1) {
                this.$refs.documentUpload.uploadFiles = []
              } else {
                if (
                  uploadFiles[row].response.data.fileName ==
                  this.documentFiles[row].listUrl
                ) {
                  console.log('满足了条件---------')
                  this.$refs.documentUpload.uploadFiles.splice(row, 1)
                }
              }

              if (this.documentFiles.length == 1) {
                this.documentFiles = []
              } else {
                this.documentFiles.splice(row, 1)
              }
            })
            .catch()
        }
      },

      //编辑
      EditClickDocument(scope) {
        this.currentEditDocument = scope.$index
      },

      // 完成
      finishEditClickDocument() {
        this.currentEditDocument = -1
      },
      documentFileMax() {
        console.log('this.$refs.documentUpload', this.$refs.documentUpload)
        this.$message.warning(`请最多上传 ${this.documentLimit} 个文件。`)
      },
      returnCourseManage() {

        this.$router.push({
          path: '/course/courseManage'
        })
      }
    },
    created() {

      this.uploadHeaders = { //设置授权的Token
        'token': localStorage.getItem('Authorization')
      }

      this.ruleForm.id = this.$route.params.id

      console.log(this.ruleForm)
      this.getdata()
    }
  }

</script>
<style scoped>
  .el-icon-plus {
    font-size: 30px !important;
  }

  .el-icon-edit {
    font-size: 18px !important;
  }

  .el-icon-video-play {
    font-size: 18px !important;
  }

  .el-icon-delete {
    font-size: 18px !important;
    color: rgb(243, 143, 130);
  }

  .el-input>>>.el-textarea__inner {
    font-size: 18px !important;
  }

  .video {
    min-height: 200px;
    max-height: 600px;
    min-width: 200px;
    max-width: 100%;
  }

  .progressModule>>>.el-progress__text {
    color: #1296db;
    font-size: 15px !important;
  }

</style>
